<template>
	<view v-if="isLogin" class="scrollPage">
		<scroll-view scroll-y="true" class="scrollPage">
			<view class="text-white text-bold text-center flex justify-center align-center"
				style="padding:130rpx 20rpx 70rpx 20rpx;border-bottom-left-radius:40rpx;border-bottom-right-radius:40rpx;background-image:linear-gradient(to right bottom, #ff0006, #ff0035);">
				<view>
					<view v-if="isLogin" class="cu-avatar xl round bg-gray"
						style="width:160rpx;height:160rpx;font-size:3em;"
						:style="[{backgroundImage:`url(https://dt.ztn-tech.com:3000/ztIot${avatar})`}]">
					</view>
					<view v-else class="cu-avatar xl round bg-gray" style="width:160rpx;height:160rpx;font-size:3em;">
						<text class="cuIcon-people text-sl text-white"></text>
					</view>
					<view class="margin-top-sm">
						<view @tap="goToLogin" class="text-xl flex justify-center align-center">
							<input class="text-white" type="text" :value="nickName" style="width:40%;">
							<view class="cuIcon-edit padding-left text-bold" style="font-size:40rpx;"
								@tap="isShowUpdateModal = true"></view>
						</view>
					</view>
				</view>
			</view>

			<view class="common-shadow bg-white margin-bottom-lg margin-lr-xl padding flex justify-between align-center"
				style="margin-top:80rpx " @tap="cmdData()">
				<view class="flex justify-start align-center">
					<view class="cuIcon-read" style="font-size:45rpx;"></view>
					<view class="padding-left-xl text-df text-black text-bold">命令日志</view>
				</view>
				<view class="cuIcon-right"></view>
			</view>
			<view class="common-shadow bg-white margin-tb-lg margin-lr-xl padding flex justify-between align-center"
				@tap="logininfor()">
				<view class="flex justify-start align-center">
					<view class="cuIcon-exit" style="font-size:45rpx;"></view>
					<view class="padding-left-xl text-df text-black text-bold">登陆日志</view>
				</view>
				<view class="cuIcon-right"></view>
			</view>
			<view class="common-shadow bg-white margin-tb-lg margin-lr-xl padding flex justify-between align-center"
				@tap="deviceBatchCmd()">
				<view class="flex justify-start align-center">
					<view class="cuIcon-list" style="font-size:45rpx;"></view>
					<view class="padding-left-xl text-df text-black text-bold">批量操作</view>
				</view>
				<view class="cuIcon-right"></view>
			</view>
			<view class="common-shadow bg-white margin-tb-lg margin-lr-xl padding flex justify-between align-center"
				@tap="operlog()">
				<view class="flex justify-start align-center">
					<view class="cuIcon-sort" style="font-size:45rpx;"></view>
					<view class="padding-left-xl text-df text-black text-bold">操作日志</view>
				</view>
				<view class="cuIcon-right"></view>
			</view>
			<view class="common-shadow bg-white margin-tb-lg margin-lr-xl padding flex justify-between align-center"
				@tap="modifyModal()">
				<view class="flex justify-start align-center">
					<view class="cuIcon-lock" style="font-size:45rpx;"></view>
					<view class="padding-left-xl text-df text-black text-bold">修改密码</view>
				</view>
				<view class="cuIcon-right"></view>
			</view>
			<view class="common-shadow bg-white margin-tb-lg margin-lr-xl padding flex justify-between align-center"
				@tap="tapScan()">
				<view class="flex justify-start align-center">
					<view class="cuIcon-scan" style="font-size:45rpx;"></view>
					<view class="padding-left-xl text-df text-black text-bold">扫码绑定</view>
				</view>
				<view class="cuIcon-right"></view>
			</view>

			<view v-if="isLogin"
				class="common-shadow common-box bg-white margin-tb margin-lr-xl flex justify-center align-center"
				style="margin-bottom: 200rpx;" @tap="tapLogout">
				<view class="text-red-color text-bold padding-tb">退出登录</view>
			</view>

		</scroll-view>

		<view class="cu-modal bottom-modal" :class="[isShowModifyModal?'show':'']" style="text-align: start;"
			:style="[{bottom:`${tabbarHeight}px`}]">
			<view class="cu-dialog bg-white">
				<view class="cu-bar bg-white">
					<view class="action text-bold">
						修改密码
					</view>
					<view class='action text-bold'>
						<view class="cuIcon-close text-grey" @tap="modifyModal"></view>
					</view>
				</view>
				<form>
					<view class="cu-form-group">
						<view class="title">旧密码</view>
						<input type="password" v-model="oldPassword" />
					</view>
					<view class="cu-form-group" style="border-bottom: 1px solid #eee;">
						<view class="title">新密码</view>
						<input type="password" v-model="newPassword" />
					</view>
					<button class="cu-btn block margin lg" @tap="modifyPassword" form-type="reset">
						确认
					</button>
				</form>
			</view>
		</view>

		<view class="cu-modal bottom-modal" :class="[isShowUpdateModal?'show':'']"
			style="text-align: start;z-index:10001;">
			<view class="cu-dialog bg-white">
				<view class="cu-bar bg-white">
					<view class="action text-bold">
						修改用户
					</view>
					<view class='action text-bold'>
						<view class="cuIcon-close text-grey" @tap="isShowUpdateModal = false"></view>
					</view>
				</view>
				<form>
					<view class="cu-form-group solid-bottom">
						<view class="title">用户名</view>
						<input type="text" v-model="updateUserName" />
					</view>
					<!-- 	<view class="cu-form-group solid-bottom">
						<view class="title">手机号码</view>
						<input type="text" v-model="phonenumber" />
					</view>
					<view class="cu-form-group solid-bottom">
						<view class="title">邮箱</view>
						<input type="text" v-model="email" />
					</view> -->
					<button class="cu-btn bg-red block margin lg" @tap="confirmUpdate">
						确认
					</button>
				</form>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
	import {
		showModal,
		showToast,
		showLoading,
		hideLoading
	} from '@/util/toast'
	import * as storage from '@/util/storage'
	import myConfig from '@/myConfig'
	import * as loginApi from '@/api/dmIot/loginApi.ts'
	import * as userApi from '@/api/dmIot/user.ts'
	import * as ztIotApi from '@/api/dmIot/ztIotApi.ts'
	export default {
		name: 'Center',
		computed: {},
		props: {
			param: {
				type: [Number, String, Object],
				default () {
					return null;
				}
			},
		},
		data() {
			return {
				isLogin: false,
				iconBaseUrl: myConfig.app.baseUrl,
				nickName: "",
				updateUserName: "",
				phonenumber: "",
				email: "",
				avatar: "",
				appVersion: myConfig.app.version,
				isShowModifyModal: false,
				isShowUpdateModal: false,
			}
		},
		created() {
			this.init()
		},
		methods: {
			init() {
				this.getInfo()
			},
			getInfo() {
				loginApi.getInfo().then((res) => {
					const {
						user,
						code,
						msg,
						success
					} = res
					if (success) {
						this.isLogin = true
						let {
							nickName,
							avatar,

						} = user
						this.nickName = nickName
						this.updateUserName = nickName
						this.avatar = avatar
					} else {
						uni.redirectTo({
							url: `/pages/login/login`
						})
					}
				})
			},
			confirmUpdate() {
				let id = this.id
				let nickName = this.updateUserName
				ztIotApi.profile({
					id,
					nickName
				}).then((res) => {
					const {
						code,
						msg,
						success
					} = res
					if (success) {
						showToast("操作成功", 'none', 1000, false) //操作成功
						this.isShowUpdateModal = false
						this.getInfo()
					} else {
						showToast("操作失败", 'none', 1000, false) //操作失败
					}

				})
			},
			operlog() {
				uni.navigateTo({
					url: `/pages/operlog/operlog`
				})
			},
			logininfor() {
				uni.navigateTo({
					url: `/pages/logininfor/logininfor`
				})
			},
			cmdData() {
				uni.navigateTo({
					url: `/pages/cmdData/cmdData`
				})
			},
			deviceBatchCmd() {
				uni.navigateTo({
					url: `/pages/deviceBatchCmd/deviceBatchCmd`
				})
			},
			modifyModal() {
				this.isShowModifyModal = !this.isShowModifyModal
			},
			modifyPassword(e) {
				const oldPassword = this.oldPassword.replace(/\s/g, '')
				const newPassword = this.newPassword.replace(/\s/g, '')
				if (oldPassword.length < 6 || newPassword.length < 6) {
					// this.$t('passwordLeastLengthTip')
					showToast('密码长度小于6位', 'none', 1000, false)
				} else if (oldPassword === newPassword) {
					// this.$t('password') + this.$t('equal')
					showToast('新旧密码相等', 'none', 1000, false)
				} else {
					let data = {
						oldPassword,
						newPassword
					}
					userApi.updateUserPwd(data).then(res => {
						this.modifyModal()
						let {
							code,
							msg,
							success
						} = res
						if (success) {
							showToast(msg, "success", 2000, false)
						} else {
							showToast(msg, "none", 2000, false)
						}
					});
					this.oldPassword = ''
					this.newPassword = ''
				}
			},
			tapLogout() {
				// this.$t('logout') this.$t('confirm')
				const logout = '退出'
				const logoutContent = '确认' + '退出' + '?'
				const confirmText = '确认'
				const cancelText = '取消'
				showModal(logout, logoutContent, true, confirmText, cancelText, () => {
					loginApi.logout().then(() => {
						storage.setToken(null)
						storage.setUserId(null)
						this.isLogin = false
						// this.$t('success') this.$t('fail')
						showToast('操作成功', 'success', 1000, false)
						this.getInfo()
					}).catch(error => {
						showToast('操作失败', 'success', 1000, false)
					})
				}, () => {
					return
				})
			},
			tapScan() {
				uni.scanCode({
					success: (res) => {
						let result = res.result
						ztIotApi.bindingInsecticidalLampDevice({
							"bindingCode": result
						}).then((res) => {
							const {
								msg,
								data,
								success
							} = res
							if (success) {
								showToast("操作成功", 'none', 1000, false) //操作成功
								this.goToDeviceList()
							}
						})
					},
					fail: (res) => {
						showToast("操作失败", 'none', 1000, false) //操作失败
					}
				});
			},
		}
	}
</script>
<style>
	.text-title {
		color: #3f3f44;
	}

	.text-red-color {
		color: #ff0000;
	}

	.text-blue-color {
		color: #335ed9;
	}

	.text-gray-color {
		color: #cdcdcd;
	}

	.scrollPage {
		min-height: 100vh;
		background-color: #f4f6ff;
	}

	.common-shadow {
		box-shadow: 0upx 0upx 10upx 4upx rgba(0, 0, 0, 0.07);
		border-radius: 8px;

	}

	.common-box {
		border: solid 2rpx transparent;
		background-image: linear-gradient(#fef2f6, #fef2f6),
			linear-gradient(to right, #ffeff2 0%, #ffd2d5 50%, #ffeff2 100%);
		background-origin: border-box;
		background-clip: content-box, border-box;
	}
</style>
